<template>
    <div class="follow-cattle-view">
        <mt-header fixed title="选择跟随方式" class="mt-header">
            <router-link :to="{path:'/cattle-detail/'+cattleId}" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>

        <div class="from-wrap">
            <form>
                <div>
                    <span>交易账户：</span>
                    <input type="text" :value="account.name" readonly>
                </div>
                <div>
                    <span>策略名称：</span>
                    <input type="text" :value="cattleName" readonly>
                </div>
                <div>
                    <span>跟随方向：</span>
                    <input type="text" value="正向/反向下单" readonly>
                </div>
                <div>
                    <span>配置模式：</span>

                    <!-- <input type="text"  v-model="selected"> -->
                    <select @change="" v-model="selected">
                        <option v-for="item in selects" v-model="item.value">{{ item.value }}</option>
                    </select>
                </div>
                <div class="form-tip">
                    <p v-if="selected == '资金比例'">例如牛人本金10万美金，跟随者1万美金，牛人下单1手，跟随者下单0.1手。</p>
                    <p v-if="selected == '固定手数'">例如您设置固定数量0.01标准手，无论交易员下单多少标准手，您手数均为0.01标准手。最低跟随手数为0.01标准手。</p>
                    <p v-if="selected == '按比例下单'">按比例下单：例如您设置为0.5倍比例跟随，交易员下单1标准手，您的手数为0.5标准手。</p>
                </div>
                <div class="protocol">
                    <p><input type="checkbox" name="agree" />同意<router-link :to="'/home'"> “服务条款” </router-link>和<router-link :to="'/home'"> “第三方策略免责协议” </router-link>并知悉潜在的风险和收益。</p>
                    
                </div>
            </form>
        </div>
        <div v-if="selected == '固定手数'">
            <div class="spacing"></div>
            <h4>风险度：</h4>
            <mt-picker :slots="slots1" @change="onValuesChange" :visibleItemCount="3"></mt-picker> 
        </div>
        <div v-if="selected == '按比例下单'">
            <div class="spacing"></div>
            <h4>设置下单手数：</h4>
            <mt-picker :slots="slots1" @change="onValuesChange" :visibleItemCount="3"></mt-picker> 
        </div>

        <div class="btns">
            <router-link to="/account" slot="left">确认</router-link>
            <router-link :to="{path:'/cattle-detail/'+cattleId}" slot="left">取消</router-link>
        </div>

        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'Follow-StrategyView',
        data () {
            return {
                cattleName: this.$route.params.name,
                cattleId: this.$route.params.id,
                selected:'资金比例',
                selects: [
                    {value: '资金比例'},
                    {value: '固定手数'},
                    {value: '按比例下单'}
                ],


                slots1:[{
                    flex:5,
                    className: 'slot1-1',  
                    textAlign: 'right',
                    defaultIndex: 1,
                    values: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
                },{
                    flex:1,
                    values:[':']
                },{
                    flex:2,
                    className: 'slot1-2',  
                    textAlign: 'left',
                    defaultIndex: 1,
                    values:['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99']
                },{
                    flex:4,
                    className: 'slot1-3',  
                    textAlign: 'left',
                    values:['标准手']
                }],


                // slots2:[{
                //     flex:5,
                //     className: 'slot2-1',  
                //     textAlign: 'right',
                //     defaultIndex: 1,
                //     values: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
                // },{
                //     flex:1,
                //     values:[':']
                // },{
                //     flex:2,
                //     className: 'slot2-2',  
                //     textAlign: 'left',
                //     defaultIndex: 1,
                //     values:['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99']
                // },{
                //     flex:4,
                //     className: 'slot2-3',  
                //     textAlign: 'left',
                //     values:['标准手']
                // }]
            }
        },
        computed: {
            ...mapState({
                account: state => state.user.myinfo

            })
        },
        methods: {
            onValuesChange(picker, values) {  
                console.log(picker)  
                console.log(values)  
            }
        },
        created(){
            console.log(this.$route)
            console.log(this.account)
        }
    }
</script>

<style scoped>
    .follow-cattle-view {
        margin-bottom: 80px;
        padding-top: 40px;
    }
    .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }
    form {
        margin-top: 30px;
    }
    .from-wrap {
        margin: 30px 50px 30px 50px;
    }
    form > div {
        display: flex;
        align-items: center;
        margin-top: 15px;
    }
    form > div span {
        flex: 2;
        text-align: left;
        font-size: 13px;
    }
    form > div input, form>div select {
        flex: 3;
        height: 25px;
        border: none;
        border-bottom: 1px solid #ddd;
        color: #999;  
    }
    form>div select {
        outline: none;
        position: relative;
        margin-left: -7px;
    }
    form>div select option {
        border: none;
        background: #fff;
    }

    .form-tip {
        font-size: 12px;
        color: #999;
        text-align: left;
        line-height: 18px;
        margin-top: 5px;
    }

    .protocol {
        margin: 0 -30px;    
    }
    .protocol p {
        margin-top: 0;
        text-align: left;
        font-size: 12px;
        color: #666;
    }
    .protocol a {
        white-space: nowrap;
        text-decoration: none;
        color: #666;
    }
    .protocol input {
        position: relative;
        top: 8px;
        left: -3px;
    }
    h4 {
        text-align: left;
        padding: 0 50px;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .btns {
        margin: 15px 0;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
    }
    .btns a {
        width: 100px;
        height: 28px;
        line-height: 28px;
        font-size: 13px;
        text-align: center;
        background: #FFF54C;
        border: 1px solid #eee;
        border-radius: 16px;
        text-decoration: none;
        color: #666;
    }
</style>